<template>
  <div class="common-layout">
    <van-nav-bar title="首页" />
    <van-grid class="grid" :gutter="10" :clickable="true" square :column-num="2">
      <van-grid-item icon="setting" text="管理页面" to="/login" />
      <van-grid-item icon="hot" text="热门视频" to="/hotVideo" />
      <van-grid-item icon="play-circle" text="抖音" to="/douyinVideo" />
      <van-grid-item icon="gold-coin" text="etf" to="/etfMedian" />
      <van-grid-item icon="thumb-circle" text="点餐程序" to="/canteenOrder" />
      <van-grid-item icon="delete" text="垃圾分类" to="/laji" />
      <van-grid-item icon="font" text="种子转磁力" to="/torrent" />
    </van-grid>
  </div>
  <div class="bottom-box">
    <a class="bottom-text" href="https://beian.miit.gov.cn" target="_blank">浙ICP备20014065号-1</a>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped lang="scss">
.common-layout {
  height: 100%;
  width: 100%;
  padding-bottom: 40px;

  .grid {
    height: 100%;
  }
}

.bottom-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #f7f8fa;
  z-index: 1;
  padding: 8px 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);

  .bottom-text {
    color: #969799;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    display: block;
    line-height: 20px;
    transition: color 0.3s;

    &:hover {
      color: #1989fa;
    }
  }
}
</style>
